<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery实现页面底部滑动置顶</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            //置顶按钮显示/隐藏实现
            // $(window).scroll(function(){
            //     var w_height = $(window).height();//浏览器高度
            //     var scroll_top = $(document).scrollTop();//滚动条到顶部的垂直高度
            //     if(scroll_top > w_height){
            //             $("#goto-top").fadeIn(500);
            //         }else{
            //             $("#goto-top").fadeOut(500);
            //     }
            // });
            //置顶
            $("#goto-top").click(function(e){
                e.preventDefault();
                $(document.documentElement).animate({
                    scrollTop: 0
                },200);
                //支持chrome
                $(document.body).animate({
                    scrollTop: 0
                },200);
            });
        })
    </script>
    <style type="text/css">
    	a{text-decoration: none;color:#000;}
    	ul li{list-style: none;}
    	.links{height: 2048px;}
        #goto-top {
            position:fixed;
            width:38px;
            height:36px;
            bottom:40px;
            right:40px;
            -webkit-transition:all 0.2s;
            -moz-transition:all 0.2s;
            -o-transition:all 0.2s;
            transition:all 0.2s;
            z-index:9999;
        }
    </style>
</head>
    
<body>
    <div class="header">
        <div class="logo">
            jQuery实现页面底部滑动置顶
        </div>
    </div>
    <ul class="links">
        <li>
            <a href="http://www.alleyloft.com" target="_blank" class="cur">小巷阁楼</a>
        </li>
        <li>
            <a href="http://www.alleyloft.com/blog" target="_blank">生活随笔</a>
        </li>
        <li>
            <a href="http://www.alleyloft.com/share" target="_blank">技术分享</a>
        </li>
        <li>
            <a href="http://www.alleyloft.com/psd" target="_blank">原创PSD作品</a>
        </li>
        <li>
            <a href="http://www.alleyloft.com/html" target="_blank">静态HTML模板</a>
        </li>
        <li>
            <a href="http://www.alleyloft.com/photo" target="_blank">个人随拍</a>
        </li>
        <li>
            <a href="http://www.alleyloft.com/index" target="_blank">音乐欣赏</a>
        </li>
        <li>
            <a href="http://www.alleyloft.com/aboutme" target="_blank">关于我</a>
        </li>
    </ul>
    <a href="#" title="返回顶部" id="goto-top">置顶</a>
</body>
</html>